<template>
  <section v-loading="listLoading">
    <div class="box-card mt-20">
      <el-row>
        <el-col :span="18">
          <div class="grid-content title">
            <h4>{{ tableData.correctiveReportDto.title }}</h4>
            <p>
              <!--     <span>整改状态 :</span>  {{ dict.corrected_progress_status[tableData.correctiveReportDto.status] }} -->
            </p>
          </div>
        </el-col>
        <el-col :span="6" align="right">
          <el-button @click="()=>this.$router.go(-1)">返 回</el-button>
          <el-button
            v-if="!this.$route.query.type && tableData.correctiveReportDto.status === 2"
            type="primary"
            @click="()=> {submitReviewDialog = true;updata()}"
          >审 核</el-button>
        </el-col>
      </el-row>
      <el-row>
        <!-- <div v-if="tableData.correctiveReportDto.status == 5">
                    <span style="color:#555">本次整改已全部完成，整改明细请返回前一页下载word版整改报告，下期将支持系统内查看整改详情</span>
        </div>-->
        <div>
          
          <detail-common :tableData="tableData" v-if="!listLoading" :role="2"/>
          <!-- <el-col :span="24">
            <div>
              <span style="font-size: 16px; color: rgb(51, 51, 51);">综合意见</span>
              <p
                style=" color: #666;line-height: 28px; margin:0 0 35px;"
              >{{tableData.correctiveReportDto.suggestion}}</p>
            </div>
          </el-col>
          <el-col :span="24">
            <el-tabs v-model="activeName">
              <el-tab-pane :label="'整改区 ( ' + reformNumber + '项 )'" name="corrected">
                <el-col :span="24">
                  <div
                    class="item-column"
                    style="border:1px solid #e6e6e6; padding:20px 40px 10px;"
                  >

                  
                    <span class="corrected-title">整改工作情况</span>
                    <p style="margin:0 0 20px;">
                      <el-input
                        :autosize="true"
                        type="textarea"
                        resize="none"
                        class="showTextConter"
                        v-model="tableData.correctiveReportDto.suggestion"
                        readonly
                      ></el-input>
                    </p>
                  </div>

                  <div style="margin-top:20px;" v-if="tableData.correctiveReportDto.status === 2">
                    <el-checkbox-group v-model="checkList">
                      <el-checkbox :label="2">已批注</el-checkbox>
                      <el-checkbox :label="1">未批注</el-checkbox>
                    </el-checkbox-group>
                  </div>

                  <ul class="corrected-item">
                    <li v-for="(item, index) in tableDataFilter" :key="index" >
                      <div class="list-item">

                        <p
                          class="check-item-desc"
                        >{{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                        <div class="item-title-s step1">检查信息</div>
                        <div class="item-content">
                          <div
                          class="check-item-images item-column"
                          v-if="item.checkItemDescDTO.image_list.length > 0"
                        >
                          <span class="item-column-title">图片</span>
                          <ul class="image-list">
                            <li
                              v-for="(imageItem, index) in item.checkItemDescDTO.image_list"
                              :key="index"
                            >
                              <img
                                :src="basis_url + imageItem.path"
                                alt
                                @click="handlePictureCardPreview({url:imageItem.path})"
                              />
                            </li>
                          </ul>
                        </div>
                        <div
                          class="check-item-building-room item-column"
                          v-if="item.checkItemDescDTO.building_room.length > 0"
                        >
                          <span class="item-column-title">涉及房间</span>
                          <div>
                            <el-tag
                              v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                              :key="index"
                              type="success"
                              style="margin-right:15px;"
                            >{{tagRoom.building}}</el-tag>
                          </div>
                        </div>
                        <div
                          class="check-item-building-info item-column"
                          v-if="item.checkItemDescDTO.desc.length > 0"
                        >
                          <span class="item-column-title">描述信息</span>

                          <el-input
                            :autosize="true"
                            type="textarea"
                            resize="none"
                            class="showTextConter"
                            v-model="item.checkItemDescDTO.desc"
                            readonly
                          ></el-input>
                        </div>

                        </div>
                        
                        <div class="check-item-corrected item-column ">
                          <div class="item-title-s step2">整改信息</div>
                        </div>
                        <el-row
                          :gutter="40"
                          v-for="(checkItemInfo, checkItemindex) in item.correctiveItemDto.check_item_info"
                          :key="checkItemindex"
                        >
                          <div class="items-column-row">
                            <el-col :span="24">
                              <span class="items-column-row-title">整改内容 {{checkItemindex + 1}}</span>
                            </el-col>
                            <el-col :span="24">
                              <div class="check-item-effect-images items-column-row-column">
                                <span class="item-column-title">图片</span>
                                <ul class="image-list" v-if="checkItemInfo.images.length > 0">
                                  <li
                                    v-for="(imageItem, imageIndex) in checkItemInfo.images"
                                    :key="imageIndex"
                                  >
                                    <img
                                      :src="basis_url + imageItem.path"
                                      alt
                                      @click="handlePictureCardPreview({url:imageItem.path})"
                                    />
                                  </li>
                                </ul>
                                <p v-else style="line-height:16px; margin:0;">暂无</p>
                              </div>
                            </el-col>
                          
                            <el-col :span="24">
                              <div class="check-item-cause items-column-row-column">
                                <span class="item-column-title">原因分析</span>
                                <el-input
                                  type="textarea"
                                  resize="none"
                                  :autosize="true"
                                  class="showTextConter"
                                  placeholder="未填写原因分析"
                                  v-model="checkItemInfo.reason"
                                  readonly
                                ></el-input>
                              </div>
                            </el-col>
                            <el-col :span="24">
                              <div class="check-item-effect items-column-row-column">
                                <span class="item-column-title">整改措施与结果</span>
                                <el-input
                                  type="textarea"
                                  resize="none"
                                  :autosize="true"
                                  class="showTextConter"
                                  placeholder="未填写整改措施与结果"
                                  v-model="checkItemInfo.measure"
                                  readonly
                                ></el-input>
                              </div>
                            </el-col>
                              <el-col :span="24">
                              <div class="check-item-effect-file items-column-row-column">
                                <span class="item-column-title">附件</span>
                                <div v-if="checkItemInfo.files && checkItemInfo.files.length > 0">
                                  <a
                                    v-for="(fileItem, index) in checkItemInfo.files"
                                    :key="index"
                                    :href="basis_url + fileItem.path"
                                  >{{ fileItem.origin_name }}</a>
                                </div>
                                <p v-else style="line-height:16px; margin:0;">暂无</p>
                              </div>
                            </el-col>
                          </div>
                        </el-row>

                        <div>
                          <div class="item-title-s step3">批注信息</div>

                          <div  style="margin-top:20px;">

                          <div class="item-content" v-if="tableData.correctiveReportDto.status === 2">
                            <div>
                              <el-radio
                                :disabled="tableData.correctiveReportDto.status !== 2"
                                v-model="item.correctiveItemDto.audit"
                                :label="1"
                              >合格</el-radio>
                              <el-radio
                                :disabled="tableData.correctiveReportDto.status !== 2"
                                v-model="item.correctiveItemDto.audit"
                                :label="2"
                              >不合格</el-radio>
                            </div>
                            <div>
                              <el-input
                                      :autosize="{ minRows: 2}"
                                      :maxlength="400"
                                :disabled="tableData.correctiveReportDto.status !== 2"
                                type="textarea"
                         
                                     
                                :placeholder="tableData.correctiveReportDto.status !== 2?'':'请输入内容审核意见，字数不超过400字'"
                                v-model="item.correctiveItemDto.audit_reason"
                              ></el-input>
                            </div>
                          </div>

                           <div v-else class="" >
                                <div style="margin-bottom:20px;">
                                    <el-tag type="success" v-if="item.correctiveItemDto.audit===1">合格</el-tag>
                                    <el-tag type="danger" v-else>不合格</el-tag>

                                </div>
                                <div>
                                    <el-input
                                      v-if="item.correctiveItemDto.audit_reason&& item.correctiveItemDto.audit_reason.length"
                                      :autosize="{ minRows: 6}"
                                        class="showTextConter"
                                            readonly=""
                                            type="textarea"
                                            :rows="4"
                                            v-model="item.correctiveItemDto.audit_reason">
                                    </el-input>
                                </div>
                            </div>


                          </div>
                          
                        </div>
                      </div>
                    </li>
                  </ul>
                </el-col>
              </el-tab-pane>
              <el-tab-pane :label=" '待整改区 ( ' +  unReformNumber + ' 项  )'" name="unCorrected" v-show="paneShow">
                <el-col :span="24">
                  <ul class="corrected-item">
                    <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                      <div v-if="item.correctiveItemDto.status === 2" class="list-item">
                        <p
                          class="check-item-desc"
                        >{{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}</p>
                        <div class="item-title-s step1">
                          检查信息
                        </div>
                        <div class="item-content">
                          <div
                          class="check-item-images item-column"
                          v-if="item.checkItemDescDTO.image_list.length > 0"
                        >
                          <span class="item-column-title">图片</span>
                          <ul class="image-list">
                            <li
                              v-for="(imageItem, index) in item.checkItemDescDTO.image_list"
                              :key="index"
                            >
                              <img
                                :src="basis_url + imageItem.path"
                                alt
                                @click="handlePictureCardPreview({url:imageItem.path})"
                              />
                            </li>
                          </ul>
                        </div>
                        <div
                          class="check-item-building-room item-column"
                          v-if="item.checkItemDescDTO.building_room.length > 0"
                        >
                          <span class="item-column-title">涉及房间</span>
                          <div>
                            <el-tag
                              v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                              :key="index"
                              type="success"
                              style="margin-right:15px;"
                            >{{tagRoom.building}}</el-tag>
                          </div>
                        </div>
                        <div class="check-item-building-info item-column">
                          <span class="item-column-title">问题描述</span>
                          <p>
                            <el-input

                              :autosize="true"
                              type="textarea"
                              resize="none"
                              class="showTextConter"
                              v-model="item.checkItemDescDTO.desc"
                              readonly
                            ></el-input>
                          </p>
                        </div>
                           </div>
                         <div class="item-title-s step1">
                          未整改信息
                        </div>
                        <div class="item-content" v-if='item.correctiveItemDto.no_reason&&item.correctiveItemDto.no_reason.length || item.correctiveItemDto.no_reason_files&& item.correctiveItemDto.no_reason_files.length'>
                           <div class="check-item-corrected">
                          <span class="item-column-title">未整改原因及未来整改计划</span>
                          <el-input
                            v-if="item.correctiveItemDto.no_reason && item.correctiveItemDto.no_reason != ''"
                            type="textarea"
                            resize="none"
                            class="showTextConter"
                            autosize
                            v-model="item.correctiveItemDto.no_reason"
                            readonly
                          ></el-input>
                          <p v-else style="line-height:16px; margin:0;">暂无</p>
                        </div>
                        <div class="check-item-effect-file item-column">
                          <span class="item-column-title">附件</span>
                          <div
                            v-if="item.correctiveItemDto.no_reason_files && item.correctiveItemDto.no_reason_files.length > 0"
                          >
                            <a
                              v-for="(fileItem, index) in item.correctiveItemDto.no_reason_files"
                              href="javascript:;"
                              @click="downloadFile(fileItem.path,fileItem.origin_name)"
                              :key="index"
                            >{{ fileItem.origin_name }}</a>
                          </div>
                          <p v-else style="line-height:16px; margin:0;">暂无</p>
                          <br />
                        </div>

                        </div>

                        <p v-else  class="item-content"  style="line-height:36px; margin:0;">暂无</p>
                       

                        </div>
                        
                    </li>
                  </ul>
                </el-col>
              </el-tab-pane>
            </el-tabs>
          </el-col> -->
        </div>
      </el-row>
    </div>
    <el-dialog
      title="请输入审核意见"
      :visible.sync="submitReviewDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-input
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 6}"
        v-model.trim="reviewDesc"
        placeholder="请输入审核意见"
      ></el-input>
      
       <p
        v-if="audit_emtpy.length"
        style="color:red"
      >请先批注检查项：{{audit_emtpy.join('，')}}</p>
      <p
        v-if="review_empty.length"
        style="color:red"
      >注：需全部整改项的批注状态均为“合格”时才可通过，目前存在不合格项：{{review_empty.join('，')}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitReviewDialog = false">取 消</el-button>
        <el-button :loading="auditLoading" type="danger" @click="auditReview(2)" :disabled="audit_emtpy.length>0">打 回</el-button>
        <el-button :loading="auditLoading" type="primary" @click="auditReview(1)" :disabled="review_empty.length>0 || audit_emtpy.length>0">通 过</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogShowImages">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </section>
</template>

<script>
import {
  getCorrectedProgressData,
  expertAuditReview
} from "../../api/corrected_api";
import { updateCorrectedProgressData } from "../../api/corrected_api";
import dict from "../../common/js/dict";
import { saveAs } from "../../common/js/commons";
    import detailCommon from '../univCorrectedProgress/detailCommon'

export default {
    name:'expertCorrectedReview',
   components:{
          detailCommon 
        },
  data() {
    return {
      //表格数据
      dict: dict,
      tableData: {
        correctiveReportDto: {
          title: ""
        }
      },
      auditLoading:false,
      paneShow:true,
      reviewDesc: "",
      activeName: "corrected",
      reformNumber: 0,
      unReformNumber: 0,
      corrective_report_id: this.$route.params.id,
      basis_url: "",
      dialogImageUrl: "",
      dialogShowImages: false,
      submitReviewDialog: false,
      listLoading: true,
      checkList: [2, 1]
    };
  },
  created() {
    this.getTableData();
 
  },
  computed: {
    review_empty() {
      if (this.tableData.correctiveItems) {
        return this.tableData.correctiveItems
          .filter(item => item.correctiveItemDto.audit === 2  && item.correctiveItemDto.status !==2)
          .map(item => {
            return item.checkItemDescDTO.check_item_three_order_number;
          });
      } else {
        return [];
      }
    },
    audit_emtpy(){
        if (this.tableData.correctiveItems) {
        return this.tableData.correctiveItems
          .filter(item => item.correctiveItemDto.audit === 0 && item.correctiveItemDto.status !==2)
          .map(item => {
            return item.checkItemDescDTO.check_item_three_order_number;
          });
      } else {
        return [];
      }
    },
    // tableDataFilter() {
    //   if (this.tableData.correctiveItems) {
    //     let sum = eval(this.checkList.join("+"));
    //     if (sum === 3) {
    //       return this.tableData.correctiveItems.filter(
    //         item =>  item.correctiveItemDto.status == 1 || item.correctiveItemDto.status == 3
    //       );
    //     } else if (sum === 2) {
    //       return this.tableData.correctiveItems.filter(
    //         item => item.correctiveItemDto.audit !== 0 && (item.correctiveItemDto.status == 1 ||item.correctiveItemDto.status == 3)
    //       );
    //     }else if (sum === 1) {
    //       console.log(1)
    //       console.log(this.tableData.correctiveItems[0].audit)
    //       return this.tableData.correctiveItems.filter(
    //         item => 
    //         {
    //           console.log(item.correctiveItemDto.audit === 0)
    //           return item.correctiveItemDto.audit === 0 && (item.correctiveItemDto.status == 1 ||item.correctiveItemDto.status == 3)
    //         }
    //       );
    //     } else {
    //       return []
    //     }
    //   }
    //  }
  },

 
  methods: {
    updata() {
      updateCorrectedProgressData(this.tableData).then(res => {
        if (res.data.status === 200) {
          /*   this.$notify({
                            title: '提示',
                            message: '保存成功！',
                            type: 'success',
                            duration: 2000
                        })*/
        }
      });
    },
    getTableData() {
      getCorrectedProgressData({
        corrective_report_id: this.$route.params.id
      }).then(res => {
        if (res.data.status == 200) {
          let temp_data = JSON.parse(res.data.datas);
          temp_data.correctiveItems.map((item, index) => {
            if (item.correctiveItemDto.status == 1  || item.correctiveItemDto.status == 3) return this.reformNumber++;
            if (item.correctiveItemDto.status == 2)
              return this.unReformNumber++;
          });
           this.listLoading = false
          temp_data.correctiveItems.map(item => {
          
            if (!item.correctiveItemDto.audit && item.correctiveItemDto.status !== 2) {
              item.correctiveItemDto.audit = 0;
            }

            if (!item.correctiveItemDto.audit_reason && item.correctiveItemDto.status !== 2) {
              item.correctiveItemDto.audit_reason = "";
            }
            return item;
          });
   setTimeout(()=>{
                                this.paneShow = false
                        },200)
          this.tableData = temp_data;
        } else {
          if (res.data.status == 401) {
            this.$router.push("/login");
          }
          this.$message.error(res.data.msg);
        }
      });
    },
    handleClose() {
      this.reviewSuggest = "";
      this.submitReviewDialog = false;
    },

    downloadFile(url, name) {
      saveAs(url, name);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogShowImages = true;
    },
    auditReview(code) {
  
      if (this.reviewDesc == "") return this.$message.error("请输入审核意见！");
      let params = {
        corrective_report_id: this.corrective_report_id,
        opinion: this.reviewDesc,
        audit: code
      };
          this.auditLoading=true
      expertAuditReview(params).then(res => {
        if (res.data.status == 200) {
          if (res.data.status == 200) {
            this.getTableData();
            this.$notify({
              title: "提示",
              message: "审核操作成功！",
              type: "success",
              duration: 2000
            });
            this.auditLoading=false
            this.submitReviewDialog = false;
            this.$router.go(-1);
          }
        }
      });
    }
  }
};
</script>
<style lang="scss">
.item-title-s {
  display: block;
  padding: 5px 16px;
  line-height: 30px;
  /*border: 1px solid #419eff;*/
  color: #000;
  background:#eee;
  margin-top:20px;

 /* &.step1 {
  }
  &.step2 {
    border: 1px solid #81c136;
    color: #81c136;
  }
  &.step3 {
    border: 1px solid #ff9d0d;
    color: #ff9d0d;
  }*/
}
</style>
<style scoped lang="scss" >
.mt-20 {
  margin-top: 20px;
}

.box-card {
  padding: 5px 25px;
  .grid-content {
    &.title {
      h4 {
        font-size: 24px;
        color: #101010;
        margin: 0;
      }
      p {
        display: inline-block;
        width: 200px;
        color: #333;
        span {
          color: #888;
        }
      }
    }
  }
  .corrected-title {
    font-size: 18px;
    color: #101010;
    padding: 35px 0 10px;
    line-height: 18px;
  }
  .items-column-row {
    background: #f7f7f7;
    overflow: hidden;
    margin: 0 20px 20px;
    padding: 0px 10px;
    .items-column-row-title {
      line-height: 20px;
      display: block;
      font-size: 16px;
      padding: 20px 0 10px;
      font-weight: bold;
      color: #333;
    }
    .items-column-row-column {
      margin: 10px 0 20px;
    }
  }
  .corrected-item {
    list-style: none;
    padding-left: 0;
    li {
      .check-item-desc {
        font-size: 16px;
        color: #333;
        line-height: 28px;
        margin-bottom: 0;
      }
      div {
   
        &.list-item {
          border: 1px solid #e6e6e6;
          padding: 10px 40px;
          margin-bottom: 20px;
           .check-item-images{
                            display:table;
                        }
        }
        &.top-border {
          border-top: 1px solid #e6e6e6;
          margin-top: 20px;
        }
        .image-list {
          width: 100%;
          height: 100px;
          padding: 0;
          li {
            width: 100px;
            height: 100px;
            float: left;
            list-style: none;
            padding: 0;
            border: 1px solid #efefef;
            margin-right: 15px;
            overflow: hidden;
            border-radius: 8px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        p {
          font-size: 14px;
          color: rgba(102, 102, 102, 1);
          line-height: 24px;
        }
        span {
          &.item-column-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            display: block;
            margin-bottom: 10px;
            line-height: 26px;
          }
        }
      }
    }
  }
}
</style>
